<template>
  <div class="nav-container">
    <el-menu
        :default-active="activeIndex"
        class="nav-menu"
        mode="horizontal"
        @select="handleSelect"
    >
      <!-- 左侧菜单项 -->
      <el-menu-item index="Home">
        <router-link to="/home">
          首页
        </router-link>
      </el-menu-item>
      <el-menu-item index="AnimeSeries">番剧</el-menu-item>
      <el-menu-item index="LiveStreaming">直播</el-menu-item>
      <el-menu-item index="GameCenter">游戏中心</el-menu-item>
      <el-menu-item index="MemberPurchase">会员购</el-menu-item>
      <el-menu-item index="Comic">漫画</el-menu-item>
      <el-menu-item index="Event">赛事</el-menu-item>
      <el-menu-item index="Download">下载客户端</el-menu-item>

      <!-- 搜索框（作为菜单项） -->
      <el-menu-item class="search-menu-item">
        <el-input
            v-model="searchText"
            class="search-input"
            placeholder="请输入搜索内容"
            :prefix-icon="Search"
            clearable
        />
      </el-menu-item>

      <!-- 头像栏-->
      <el-menu-item class="avatar-item">
        <!-- 登录状态下的用户信息下拉菜单 -->
        <el-popover 
          v-if="loginStatus" 
          :width="280" 
          :visible="userMenuVisible" 
          placement="bottom-end"
          trigger="click"
          popper-class="user-menu-popover"
        >
          <template #default>
            <div class="user-menu-content" @mouseleave="userMenuVisible = false">
              <!-- 用户信息头部 -->
              <div class="user-menu-header">
                <el-avatar :size="50" :src="userConfig.avatarUrl" class="menu-avatar">
                  <span v-if="!userConfig.avatarUrl">{{ userConfig.username?.charAt(0) || 'U' }}</span>
                </el-avatar>
                <div class="user-menu-info">
                  <div class="user-menu-name">
                    <span>{{ userConfig.username || '用户' }}</span>
                    <el-tag v-if="userConfig.vipLevel" type="warning" size="small" class="menu-vip-tag">
                      LV{{ userConfig.vipLevel }}
                    </el-tag>
                  </div>
                  <div class="user-menu-level">Lv.{{ userConfig.level || 1 }}</div>
                </div>
              </div>
              
              <!-- 分隔线 -->
              <el-divider />
              
              <!-- 菜单项 -->
              <div class="user-menu-items">
                <div class="menu-item" @click="goToUserCenter">
                  <el-icon><User /></el-icon>
                  <span>个人中心</span>
                </div>
                <div class="menu-item" @click="goToSettings">
                  <el-icon><Setting /></el-icon>
                  <span>账号设置</span>
                </div>
                <div class="menu-item" @click="goToFavorites">
                  <el-icon><Star /></el-icon>
                  <span>我的收藏</span>
                </div>
                <div class="menu-item" @click="goToHistory">
                  <el-icon><Clock /></el-icon>
                  <span>观看历史</span>
                </div>
              </div>
              
              <!-- 分隔线 -->
              <el-divider />
              
              <!-- 退出登录 -->
              <div class="menu-item logout-item" @click="handleLogout">
                <el-icon><SwitchButton /></el-icon>
                <span>退出登录</span>
              </div>
            </div>
          </template>
          <template #reference>
            <el-avatar 
              @click="userMenuVisible = !userMenuVisible" 
              :size="50" 
              :src="userConfig.avatarUrl"
              class="nav-avatar"
            >
              <span v-if="!userConfig.avatarUrl">{{ userConfig.username?.charAt(0) || 'U' }}</span>
            </el-avatar>
          </template>
        </el-popover>
        
        <!-- 未登录状态 -->
        <el-popover 
          v-else
          :width="350" 
          :visible="visible" 
          placement="bottom"
        >
          <template #default>
            <div @mouseleave="visible = false">
              <span>登陆后你可以：</span><br>
              免费看高清视频&nbsp;&nbsp;&nbsp;&nbsp;多端同步播放记录 <br>
              发表弹幕/评论&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热门番剧影视看不停 <br>
              <el-button style="width: 100%" type="primary" @click="showAuthPanel">
                立即登录
              </el-button>
              <div style="text-align: center;">首次使用？
                <el-link type="primary" @click="showAuthPanel" :underline="false">点我注册</el-link>
              </div>
            </div>
          </template>
          <template #reference>
            <el-avatar 
              @mouseover="visible = true" 
              :size="50" 
              :src="userConfig.avatarUrl || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
            />
          </template>
        </el-popover>
      </el-menu-item>
      <el-menu-item index="GrandMember">
        <router-link to="/user">
          大会员
        </router-link>
      </el-menu-item>
      <el-menu-item index="News">消息</el-menu-item>
      <el-menu-item index="Dynamic">动态</el-menu-item>
      <el-menu-item index="Collect">收藏</el-menu-item>
      <el-menu-item index="History">历史</el-menu-item>
      <el-menu-item index="">创作中心</el-menu-item>
      <el-menu-item class="contribute-item" index="Contribute">
        <el-button
            type="primary"
            size="default"
            class="contribute-btn"
            @click.stop="handleContribute"
        >
          投稿
        </el-button>
      </el-menu-item>
    </el-menu>

    <!-- B站风格悬浮登录/注册面板 -->
    <div v-show="authPanelVisible" class="auth-panel">
      <div class="auth-panel-content">
        <!-- 关闭按钮 -->
        <div class="close-btn" @click="hideAuthPanel">
          <el-icon>
            <Close/>
          </el-icon>
        </div>

        <div class="auth-header">
          <h3>登录aliali</h3>
          <p>精彩视频，即将呈现</p>
        </div>

        <el-tabs v-model="activeTab" stretch @tab-change="handleTabChange" class="auth-tabs">
          <!-- 登录表单 -->
          <el-tab-pane name="login" label="登录">
            <el-form
                ref="loginFormRef"
                :model="loginForm"
                :rules="loginRules"
                @submit.prevent="handleLogin"
                class="auth-form"
            >
              <el-form-item prop="username">
                <el-input
                    v-model="loginForm.phoneNum"
                    placeholder="账号"
                    :prefix-icon="User"
                    clearable
                    size="large"
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                    v-model="loginForm.password"
                    type="password"
                    placeholder="密码"
                    :prefix-icon="Lock"
                    show-password
                    clearable
                    size="large"
                />
              </el-form-item>
              <div class="form-options">
                <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
                <el-link type="primary" :underline="false" class="forgot-password">忘记密码?</el-link>
              </div>
              <el-button
                  type="primary"
                  native-type="submit"
                  class="submit-btn"
                  :loading="loginLoading"
                  size="large"
              >
                登录
              </el-button>
            </el-form>
          </el-tab-pane>

          <!-- 注册表单 -->
          <el-tab-pane name="register" label="注册">
            <el-form
                ref="registerFormRef"
                :model="registerForm"
                :rules="registerRules"
                @submit.prevent="handleRegister"
                class="auth-form"
            >
              <el-form-item prop="phone">
                <el-input
                    v-model="registerForm.phone"
                    placeholder="请输入手机号"
                    :prefix-icon="Iphone"
                    clearable
                    size="large"
                />
              </el-form-item>
              <el-form-item prop="smsCode">
                <div class="sms-code-input">
                  <el-input
                      v-model="registerForm.smsCode"
                      placeholder="短信验证码"
                      :prefix-icon="Message"
                      clearable
                      size="large"
                  />
                  <el-button
                      :disabled="smsCountdown > 0"
                      @click="sendSmsCode"
                      class="sms-btn"
                  >
                    {{ smsCountdown > 0 ? `${smsCountdown}s后重试` : '获取验证码' }}
                  </el-button>
                </div>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                    v-model="registerForm.password"
                    type="password"
                    placeholder="设置密码"
                    :prefix-icon="Lock"
                    show-password
                    clearable
                    size="large"
                />
              </el-form-item>
              <el-button
                  type="primary"
                  native-type="submit"
                  class="submit-btn"
                  :loading="registerLoading"
                  size="large"
              >
                注册
              </el-button>
            </el-form>
          </el-tab-pane>
        </el-tabs>

        <!-- 第三方登录 -->
        <div class="social-login">
          <div class="divider">
            <span class="divider-text">或使用以下方式登录</span>
          </div>
          <div class="social-icons">
            <el-icon class="social-icon">
              <ChromeFilled/>
            </el-icon>
            <el-icon class="social-icon">
              <WechatFilled/>
            </el-icon>
            <el-icon class="social-icon">
              <Alipay/>
            </el-icon>
          </div>
        </div>
      </div>

      <!-- 遮罩层 -->
      <div class="auth-panel-mask" @click="hideAuthPanel"></div>
    </div>
  </div>
</template>

<script setup>
import {ElMessage, ElMessageBox} from "element-plus";
import {ref, reactive, onMounted, onBeforeUnmount} from 'vue'
import {useRouter} from 'vue-router'
import {Search, Close, User, Setting, Star, Clock, SwitchButton} from '@element-plus/icons-vue'
import axios from 'axios';
import {
  Lock,
  Iphone,
  Message,
  ChromeFilled,
  WechatFilled,
  Alipay
} from '@element-plus/icons-vue'
import Cookies from "js-cookie";

// 路由
const router = useRouter()

// 认证面板控制
const authPanelVisible = ref(false)
const loginStatus = ref(false)
const userMenuVisible = ref(false)

// 显示认证面板
const showAuthPanel = () => {
  if(!loginStatus.value){
    authPanelVisible.value = true
    document.body.style.overflow = 'hidden' // 防止背景滚动
  }
}

// 隐藏认证面板
const hideAuthPanel = () => {
  authPanelVisible.value = false
  document.body.style.overflow = '' // 恢复背景滚动
}

// 标签页控制
const activeTab = ref('login')
const loginFormRef = ref(null)
const registerFormRef = ref(null)
const userConfig = reactive({
  username: '',
  avatarUrl: '',
  vipLevel: 0,
  level: 1
})

// 获取用户详细信息

const fetchUserDetails = async () => {

  // 检查是否存在token，只有存在token才尝试获取用户信息

  const token = localStorage.getItem('token') || Cookies.get('satoken')

  if (!token) {

    console.log('未检测到登录token，跳过获取用户信息')

    return false

  }



  try {

    const response = await axios.get('http://localhost:80/user/details', {

      headers: {

        'Content-Type': 'application/json'

      },

      withCredentials: true // 确保发送cookie

    })



    if (response.status === 200 && response.data.code === 0) {

      const userData = response.data.data || response.data

      

      // 更新用户配置

      userConfig.username = userData.username || userData.phoneNum || '用户'

      userConfig.avatarUrl = userData.avatarUrl || userData.avatar || ''

      userConfig.vipLevel = userData.vipLevel || 0

      userConfig.level = userData.level || 1



      // 保存用户信息到localStorage

      const userInfo = {

        id: userData.id,

        username: userConfig.username,

        phoneNum: userData.phoneNum,

        avatarUrl: userConfig.avatarUrl,

        avatar: userConfig.avatarUrl,

        vipLevel: userConfig.vipLevel,

        level: userConfig.level,

        description: userData.description || '这个人很懒，什么都没有写',

        verified: userData.verified || false,

        location: userData.location || '',

        signUpTime: userData.signUpTime || new Date().toISOString(),

        email: userData.email || '',

        sex: userData.sex || 'secret',

        birthday: userData.birthday || '',

        currentExp: userData.currentExp || 0,

        nextLevelExp: userData.nextLevelExp || 100,

        stats: {

          dynamic: userData.dynamic || 0,

          following: userData.following || 0,

          followers: userData.followers || 0

        },

        ...userData // 保留其他可能的字段

      }



      // 保存用户信息到localStorage

      localStorage.setItem('userInfo', JSON.stringify(userInfo))



      // 触发自定义事件，通知所有组件更新用户信息

      window.dispatchEvent(new CustomEvent('userInfoUpdated', { detail: userInfo }))



      loginStatus.value = true

      return true

    } else {

      console.error('获取用户信息失败:', response.data.message || '服务器返回错误状态')

      return false

    }

  } catch (error) {

    console.error('获取用户信息失败:', error)

    // 如果请求失败，尝试从localStorage获取用户信息

    const storedUser = localStorage.getItem('userInfo')

    if (storedUser) {

      try {

        const userInfo = JSON.parse(storedUser)

        userConfig.username = userInfo.username || '用户'

        userConfig.avatarUrl = userInfo.avatarUrl || userInfo.avatar || ''

        userConfig.vipLevel = userInfo.vipLevel || 0

        userConfig.level = userInfo.level || 1

        loginStatus.value = true

        return true

      } catch (parseError) {

        console.error('解析本地用户信息失败:', parseError)

      }

    }

    return false

  }

}



// 检查登录状态

const checkLoginStatus = async () => {

  // 尝试获取用户详细信息

  const success = await fetchUserDetails()

  if (!success) {

    // 如果获取用户信息失败，检查是否有本地token

    const token = localStorage.getItem('token')

    if (token) {

      // 从localStorage读取用户信息

      const storedUser = localStorage.getItem('userInfo')

      if (storedUser) {

        try {

          const userInfo = JSON.parse(storedUser)

          userConfig.username = userInfo.username || '用户'

          userConfig.avatarUrl = userInfo.avatarUrl || userInfo.avatar || ''

          userConfig.vipLevel = userInfo.vipLevel || 0

          userConfig.level = userInfo.level || 1

          loginStatus.value = true

        } catch (error) {

          console.error('解析用户信息失败:', error)

          // 使用默认值

          userConfig.username = '用户'

          userConfig.avatarUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

        }

      } else {

        // 如果没有用户信息，使用默认值

        userConfig.username = '用户'

        userConfig.avatarUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

      }

    }

  }

}
// 登录表单
const loginForm = reactive({
  phoneNum: '',
  password: '',
  remember: false
})
const loginRules = {
  phoneNum: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur'}
  ]
}
const loginLoading = ref(false)

// 注册表单
const registerForm = reactive({
  phone: '',
  smsCode: '',
  password: ''
})
const registerRules = {
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
  ],
  smsCode: [
    {required: true, message: '请输入验证码', trigger: 'blur'},
    {len: 6, message: '验证码为6位数字', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur'}
  ]
}

// 方法
const handleTabChange = (tabName) => {
  console.log('切换到:', tabName)
}

const handleLogin = async () => {
  try {
    loginLoading.value = true;
    const response = await axios.post(
        'http://localhost:80/user/auth',
        {
          phoneNum: loginForm.phoneNum,
          password: loginForm.password
        },
        {
          // 确保请求携带凭证，这样服务器设置的cookie才能被正确接收
          withCredentials: true
        }
    )

    if (!(response.status === 200 && response.data.code === 0)) {
      ElMessage.error(response.data.message || '登录失败');
      loginLoading.value = false;
      return;
    }

    // 优先从响应头中获取Set-Cookie中的satoken
    const setCookieHeader = response.headers['set-cookie'] || response.headers['Set-Cookie'];
    let satokenValue = null;

    if (setCookieHeader) {
      // 处理Set-Cookie头（可能是数组或字符串）
      const cookies = Array.isArray(setCookieHeader) ? setCookieHeader : [setCookieHeader];
      const satokenCookie = cookies.find(cookie => cookie && cookie.startsWith('satoken='));

      if (satokenCookie) {
        // 提取satoken值（去除属性如path、domain、expires等）
        satokenValue = satokenCookie.split(';')[0].split('=')[1];
        console.log('从Set-Cookie头获取satoken:', satokenValue);
      }
    }

    // 如果从头中没获取到，尝试从响应数据中获取
    if (!satokenValue && response.data.data && response.data.data.token) {
      satokenValue = response.data.data.token;
      console.log('从响应数据获取token:', satokenValue);
    }

    // 持久化存储token
    if (satokenValue) {
      // 存储到Cookie（设置7天过期）
      Cookies.set('satoken', satokenValue, {
        expires: 7,
        path: '/',
        // 根据实际需求设置安全属性
        // secure: true,    // 仅HTTPS传输
        // sameSite: 'strict' // CSRF防护
      });

      // 同时存储到localStorage作为备份
      localStorage.setItem('token', satokenValue);
      localStorage.setItem('satoken', satokenValue);

      console.log('Token持久化存储完成');
    } else {
      console.warn('未从响应中获取到token');
      // 即使没有token也继续流程，但给出警告
      ElMessage.warning('登录成功，但未获取到认证令牌');
    }

    // 更新登录状态和用户信息
    loginStatus.value = true;
    if (response.data.data) {
      // 构建完整的用户信息对象
      const userInfo = {
        id: response.data.data.id,
        username: response.data.data.username || response.data.data.phoneNum || '用户',
        phoneNum: response.data.data.phoneNum || loginForm.phoneNum,
        avatarUrl: response.data.data.avatarUrl || '',
        avatar: response.data.data.avatarUrl || '',
        vipLevel: response.data.data.vipLevel || 0,
        level: response.data.data.level || 1,
        description: response.data.data.description || '这个人很懒，什么都没有写',
        verified: response.data.data.verified || false,
        location: response.data.data.location || '',
        signUpTime: response.data.data.signUpTime || new Date().toISOString(),
        email: response.data.data.email || '',
        sex: response.data.data.sex || 'secret',
        birthday: response.data.data.birthday || '',
        currentExp: response.data.data.currentExp || 0,
        nextLevelExp: response.data.data.nextLevelExp || 100,
        stats: {
          dynamic: response.data.data.dynamic || 0,
          following: response.data.data.following || 0,
          followers: response.data.data.followers || 0
        },
        ...response.data.data // 保留其他可能的字段
      }

      // 更新导航栏用户配置
      userConfig.username = userInfo.username;
      userConfig.avatarUrl = userInfo.avatarUrl;
      userConfig.vipLevel = userInfo.vipLevel;
      userConfig.level = userInfo.level;

      // 保存用户信息到localStorage
      localStorage.setItem('userInfo', JSON.stringify(userInfo));

      // 触发自定义事件，通知所有组件更新用户信息
      window.dispatchEvent(new CustomEvent('userInfoUpdated', { detail: userInfo }));
    }

    ElMessage.success('登录成功');
    hideAuthPanel();

  } catch (error) {
    console.error('登录失败:', error);
    ElMessage.error(error.response?.data?.message || '登录失败');
    loginStatus.value = false;
  } finally {
    loginLoading.value = false;
  }
}
const handleRegister = async () => {
  registerLoading.value = true;

  try {
    const response = await axios.post(
        'http://localhost:80/user', {
          phoneNum: registerForm.phone,
          smsCode: registerForm.smsCode,
          password: registerForm.password
        }, {
          headers: {
            'Content-Type': 'application/json'
          }
        }
    );
    if(!(response.status === 200 && response.data.code === 0)) {
      ElMessage.error(response.data.message || '<UNK>');
    }
    console.log('注册成功:', response.data.data);

    // 请求成功
    registerLoading.value = false;
    ElMessage.success('注册成功');
    activeTab.value = 'login'; // 注册成功后切换到登录
    registerForm.phone = '';
    registerForm.smsCode = '';
    registerForm.password = '';

  } catch (error) {
    registerLoading.value = false;
    if (error.response) {
      const errorMessage = error.response.data?.message || '注册失败，请检查输入信息';
      ElMessage.error(`注册失败: ${errorMessage}`);
    } else if (error.request) {
      // 请求已发出但没有收到响应
      ElMessage.error('网络错误，请检查网络连接或服务器状态');
    } else {
      // 其他错误
      ElMessage.error('请求配置错误: ' + error.message);
    }
  }
};
//发送验证码到手机
const sendSmsCode = async () => {
  try {
    // 发送验证码请求
    await axios.post('http://localhost:80/user/code', {
      phoneNum: registerForm.phone
    }, {
      headers: {
        'Content-Type': 'application/json'
      },
      timeout: 10000 // 10秒超时
    });
// 请求成功，启动倒计时
    smsCountdown.value = 60;
    const timer = setInterval(() => {
      smsCountdown.value--;
      if (smsCountdown.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);

    ElMessage.success('验证码已发送');

  } catch (error) {
    // 错误处理
    if (error.response) {
      // 服务器响应了错误状态码
      console.error('请求失败，状态码:', error.response.status);
      ElMessage.error(`验证码发送失败: ${error.response.data?.message || '服务器错误'}`);
    } else if (error.request) {
      // 请求已发出但没有收到响应
      console.error('网络错误:', error.request);
      ElMessage.error('网络连接失败，请检查网络后重试');
    } else {
      // 其他错误
      console.error('错误:', error.message);
      ElMessage.error('验证码发送失败，请重试');
    }
  }
};

const registerLoading = ref(false)
const smsCountdown = ref(0)

const activeIndex = ref('Home')
const searchText = ref('')
const visible = ref(false)

const handleSelect = (index) => {
  console.log('当前选中:', index)
}

const handleContribute = () => {
  if (!loginStatus.value) {
    ElMessage.warning('请先登录后再投稿')
    showAuthPanel()
    return
  }
  router.push('/upload')
}

// 用户菜单相关方法
const goToUserCenter = () => {
  userMenuVisible.value = false
  router.push('/user')
}

const goToSettings = () => {
  userMenuVisible.value = false
  router.push('/user/settings')
}

const goToFavorites = () => {
  userMenuVisible.value = false
  router.push('/user/favorites')
}

const goToHistory = () => {
  userMenuVisible.value = false
  router.push('/user/history')
}

// 退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '退出登录',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 发送登出请求到服务器
    try {
      await axios.post('http://localhost:80/user/logout', {}, {
        headers: {
          'Content-Type': 'application/json'
        },
        withCredentials: true // 确保发送cookie
      })
    } catch (logoutError) {
      // 即使服务器登出失败，也继续执行本地清理
      console.warn('服务器登出请求失败，继续执行本地清理:', logoutError)
    }
    
    // 清除本地存储的token和用户信息
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    // 清除cookie
    Cookies.remove('satoken')
    
    // 重置登录状态
    loginStatus.value = false
    userConfig.username = ''
    userConfig.avatarUrl = ''
    userConfig.vipLevel = 0
    userConfig.level = 1
    
    // 关闭菜单
    userMenuVisible.value = false
    
    ElMessage.success('已退出登录')
    
    // 如果当前在需要登录的页面，跳转到首页
    if (router.currentRoute.value.meta?.requiresAuth) {
      router.push('/home')
    }
  } catch (error) {
    // 用户取消操作
    if (error !== 'cancel') {
      console.error('退出登录失败:', error)
    }
  }
}

// 点击ESC键关闭面板
const handleKeydown = (e) => {
  if (e.key === 'Escape' && authPanelVisible.value) {
    hideAuthPanel()
  }
}

// 添加全局键盘事件监听

onMounted(async () => {

  document.addEventListener('keydown', handleKeydown)

  // 检查登录状态并获取用户信息

  await checkLoginStatus()

})

onBeforeUnmount(() => {
  document.removeEventListener('keydown', handleKeydown)
  document.body.style.overflow = '' // 确保清理样式
})
</script>

<style scoped>
.nav-container {
  position: relative;
  width: 100%;
  background: var(--bg-primary, #ffffff);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
}

.nav-container :deep(.el-menu) {
  max-width: var(--container-wide-width, 1400px);
  margin: 0 auto;
  padding: 0 var(--spacing-lg, 20px);
}

.nav-menu {
  display: flex;
  align-items: center;
  border-bottom: none;
}

/* 导航栏头像样式 */
.nav-avatar {
  cursor: pointer;
  transition: transform 0.2s;
}

.nav-avatar:hover {
  transform: scale(1.05);
}

/* 用户菜单样式 - B站风格 */
:deep(.user-menu-popover) {
  padding: 0 !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.user-menu-content {
  padding: 16px;
  min-width: 240px;
}

.user-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
}

.menu-avatar {
  flex-shrink: 0;
  border: 2px solid #f0f0f0;
}

.user-menu-info {
  flex: 1;
  min-width: 0;
}

.user-menu-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
  color: #18191c;
}

.menu-vip-tag {
  font-size: 11px;
  padding: 2px 6px;
}

.user-menu-level {
  font-size: 12px;
  color: #9499a0;
}

.user-menu-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  color: #61666d;
}

.menu-item:hover {
  background-color: #f5f7fa;
  color: #00a1d6;
}

.menu-item .el-icon {
  font-size: 18px;
  width: 18px;
}

.logout-item {
  color: #f56c6c;
}

.logout-item:hover {
  background-color: #fef0f0;
  color: #f56c6c;
}

:deep(.el-divider) {
  margin: 12px 0;
  border-color: #f0f0f0;
}

/* 投稿按钮样式 */
.contribute-item {
  padding: 0 !important;
  height: auto !important;
  line-height: normal !important;
}

.contribute-item :deep(.el-menu-item__content) {
  padding: 0 !important;
  height: auto !important;
}

.contribute-btn {
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 4px;
  background: #00a1d6;
  border: none;
  transition: all 0.3s;
}

.contribute-btn:hover {
  background: #009bd4;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 161, 214, 0.3);
}

/* 搜索框和头像菜单项样式 */
.search-menu-item,
.avatar-item {
  padding: 0 8px !important;
}

.search-menu-item :deep(.el-menu-item__content),
.avatar-item :deep(.el-menu-item__content) {
  padding: 0 !important;
}

/* B站风格悬浮登录面板 */
.auth-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 80px;
}

.auth-panel-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.auth-panel-content {
  position: relative;
  background: white;
  border-radius: 4px;
  width: 400px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 2;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f1f2f3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background: #e5e6e7;
}

.auth-header {
  padding: 30px 30px 20px;
  text-align: center;
  border-bottom: 1px solid #f1f2f3;
}

.auth-header h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 500;
  color: #18191c;
}

.auth-header p {
  margin: 0;
  font-size: 14px;
  color: #9499a0;
}

.auth-tabs {
  padding: 0 30px;
}

:deep(.auth-tabs .el-tabs__nav-wrap::after) {
  display: none;
}

:deep(.auth-tabs .el-tabs__active-bar) {
  background-color: #00aeec;
}

:deep(.auth-tabs .el-tabs__item) {
  padding: 15px 0;
  font-size: 16px;
  color: #61666d;
}

:deep(.auth-tabs .el-tabs__item.is-active) {
  color: #00aeec;
}

:deep(.auth-tabs .el-tabs__item:hover) {
  color: #00aeec;
}

.auth-form {
  padding: 20px 0 30px;
}

:deep(.auth-form .el-input__wrapper) {
  box-shadow: 0 0 0 1px #e7e7e7;
  border-radius: 4px;
  transition: box-shadow 0.2s;
}

:deep(.auth-form .el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c9ccd0;
}

:deep(.auth-form .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #00aeec;
}

:deep(.auth-form .el-form-item) {
  margin-bottom: 20px;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

:deep(.form-options .el-checkbox) {
  color: #61666d;
}

.forgot-password {
  font-size: 14px;
}

.submit-btn {
  width: 100%;
  background: #00aeec;
  border: none;
  border-radius: 4px;
  height: 40px;
  font-size: 16px;
  transition: background-color 0.2s;
}

.submit-btn:hover {
  background: #009bd4;
}

.sms-code-input {
  display: flex;
  gap: 10px;
}

:deep(.sms-code-input .el-input) {
  flex: 1;
}

.sms-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.social-login {
  padding: 20px 30px 30px;
  border-top: 1px solid #f1f2f3;
}

.divider {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}

.divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e7e7e7;
}

.divider-text {
  position: relative;
  padding: 0 15px;
  background: white;
  color: #9499a0;
  font-size: 14px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.social-icon {
  font-size: 24px;
  color: #9499a0;
  cursor: pointer;
  transition: color 0.2s;
}

.social-icon:hover {
  color: #00aeec;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .auth-panel {
    padding-top: 60px;
    align-items: flex-start;
  }

  .auth-panel-content {
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
  }

  .auth-header,
  .auth-tabs,
  .social-login {
    padding-left: 20px;
    padding-right: 20px;
  }
}
</style>